<template>
  <view class="container">
    <!-- 页面顶部 -->
    <view class="head-info">
      <view class="cart-total">
        <text>共</text>
        <text class="active">{{ cartTotal }}</text>
        <text>件商品</text>
      </view>
      <view class="cart-edit">
        <view class="normal">
          <text class="icon iconfont icon-bianji"></text>
          <text>编辑</text>
        </view>
        <!-- <view class="edit">
          <text>完成</text>
        </view> -->
      </view>
    </view>
    <!-- 购物车商品列表 -->
    <view class="cart-list" v-if="cartList.list.length">
      <view class="cart-item" v-for="i in cartList.list" :key="i.goods_id">
        <label class="item-radio">
          <checkbox class="radio" color="#fa2209" :checked="i.is_delete" />
        </label>
        <view class="goods-image">
          <image
            class="image"
            :src="i.goods.goods_image"
            mode="scaleToFill"
          ></image>
        </view>
        <view class="item-content">
          <view class="goods-title">
            <text class="twoline-hide">{{ i.goods.goods_name }}</text>
          </view>
          <view class="goods-props clearfix">
            <view class="goods-props-item">
              <text>属性描述</text>
            </view>
          </view>
          <view class="item-foot">
            <view class="goods-price">
              <text class="unit">￥</text>
              <text class="value">{{ i.goods.goods_price_min }}</text>
            </view>
            <view class="stepper">
              <u-number-box :min="1" :value="i.goods_num" :step="1" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车数据为空 -->
    <view class="empty-content" v-else>
      <view class="empty-icon">
        <image class="image" src="/static/empty.png" mode="widthFix"></image>
      </view>
      <view class="tips">11111111111</view>
      <view class="empty-ipt">
        <text>去逛逛</text>
      </view>
    </view>
    <!-- 底部操作栏 -->
    <view class="footer-fixed">
      <label class="all-radio">
        <checkbox class="radio" color="#fa2209" />
        <text>全选</text>
      </label>
      <view class="total-info">
        <text>合计：</text>
        <view class="goods-price">
          <text class="unit">￥</text>
          <text class="value">{{ allMoney }}</text>
        </view>
      </view>
      <view class="cart-action">
        <view class="btn-wrapper">
          <view class="btn-item btn-main disabled">
            <text>去结算 ({{ cartTotal }})</text>
          </view>
          <!-- <view  class="btn-item btn-main disabled" >
            <text>删除</text>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { list, total } from '@/api/cart'
export default {
  data () {
    return {
      cartList: {},
      cartTotal: 0
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow () {
    this.getCartList()
    this.getCartNum()
  },
  computed: {
    allMoney () {
      let totalMoney = 0
      this.cartList.list.forEach(v => {
        totalMoney += v.goods.goods_price_min * v.goods_num
      })
      return totalMoney || 0
    }
  },
  methods: {
    // 购物车列表
    async getCartList () {
      const { data } = await list()
      this.cartList = data
    },
    // 购物车总数
    async getCartNum () {
      const { data } = await total()
      this.cartTotal = data.cartTotal
    }
  }
}
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.empty-content {
  box-sizing: border-box;
  width: 100%;
  padding: 140rpx 50rpx;
  text-align: center;

  .tips {
    font-size: 28rpx;
    color: gray;
    margin: 50rpx 0;
  }

  .empty-icon .image {
    width: 280rpx;
  }
}
// 页面顶部
.head-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4rpx 30rpx;
  // background-color: #fff;
  height: 80rpx;

  .cart-total {
    font-size: 28rpx;
    color: #333;

    .active {
      color: #fa2209;
      margin: 0 2rpx;
    }
  }

  .cart-edit {
    padding-left: 20rpx;

    .icon {
      margin-right: 12rpx;
    }

    .edit {
      color: #fa2209;
    }
  }
}

// 购物车列表
.cart-list {
  padding: 0 16rpx 110rpx 16rpx;
}

.cart-item {
  background: #fff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  padding: 30rpx 16rpx;
  margin-bottom: 24rpx;

  .item-radio {
    width: 56rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin-right: 10rpx;
    text-align: center;

    .radio {
      transform: scale(0.76);
    }
  }

  .goods-image {
    width: 200rpx;
    height: 200rpx;

    .image {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 8rpx;
    }
  }

  .item-content {
    flex: 1;
    padding-left: 24rpx;

    .goods-title {
      font-size: 28rpx;
      max-height: 76rpx;
    }

    .goods-props {
      margin-top: 14rpx;
      height: 40rpx;
      color: #ababab;
      font-size: 24rpx;
      overflow: hidden;

      .goods-props-item {
        display: inline-block;
        margin-right: 14rpx;
        padding: 4rpx 16rpx;
        border-radius: 12rpx;
        background-color: #f5f5f5;
        width: auto;
      }
    }

    .item-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;

      .goods-price {
        vertical-align: bottom;
        color: $uni-text-color-active;

        .unit {
          font-size: 24rpx;
        }

        .value {
          font-size: 32rpx;
        }
      }
    }
  }
}

// 空数据按钮
.empty-ipt {
  width: 220rpx;
  margin: 0 auto;
  font-size: 32rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  color: #fff;
  border-radius: 50rpx;
  background: linear-gradient(to right, #f9211c, #ff6335);
}

// 底部操作栏
.footer-fixed {
  display: flex;
  align-items: center;
  height: 96rpx;
  background: #fff;
  padding: 0 30rpx;
  position: fixed;
  bottom: var(--window-bottom);
  left: 0;
  right: 0;
  z-index: 11;

  .all-radio {
    width: 140rpx;
    display: flex;
    align-items: center;

    .radio {
      margin-bottom: -4rpx;
      transform: scale(0.76);
    }
  }

  .total-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 30rpx;

    .goods-price {
      vertical-align: bottom;
      color: #fa2209;

      .unit {
        font-size: 24rpx;
      }

      .value {
        font-size: 32rpx;
      }
    }
  }

  .cart-action {
    width: 200rpx;

    .btn-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .btn-item {
      flex: 1;
      font-size: 28rpx;
      height: 72rpx;
      line-height: 72rpx;
      text-align: center;
      color: #fff;
      border-radius: 50rpx;
    }

    // 立即购买按钮
    .btn-main {
      background: linear-gradient(to right, #f9211c, #ff6335);

      // 禁用按钮
      &.disabled {
        background: #ff9779;
      }
    }
  }
}
</style>
